<template>
  <!-- 资源库 -->
  <div class="resourceLibrary">
    <a-tabs v-model:activeKey="activeKey" type="card" @change="changeTopTabs">
      <a-tab-pane key="1" tab="我的资源">
      </a-tab-pane>
      <a-tab-pane key="2" tab="共享资源"></a-tab-pane>

    </a-tabs>
    <div class="content_1">
      <div class="content_left" v-if="activeKey == 1">
        <sourceTree @selectKeys="selectKeys"></sourceTree>
      </div>
      <div class="content_right">
        <div class="searchHeader">
          <!-- <span class="caijian"><i class="iconfont">&#xe91d;</i><span>裁剪</span></span> -->
          <a-input v-model:value="searchFileName" placeholder="搜索文件名称" style="width: 208px" @blur="getResourcePageList">
            <template #suffix>
              <i class="iconfont icon-search" @click="getResourcePageList"></i>
            </template>
          </a-input>
        </div>
        <div class="contentList">
          <div class="sourceImg" v-for="(item, index) in   resourcesData.records  " v-if="resourcesData.records.length">
            <a-popover placement="bottom">
              <template #content>
                <p>文件名称：{{ item.resourceAlias }}</p>
                <p>分辨率：{{ 10 * 10 }}</p>
                <p>大小：{{ item.resourceSizeStr }}</p>
                <p>创建日期：{{ item.createTime }}</p>
              </template>
              <div class="container_img" :class="selectFileListIds.includes(item.id) ? 'activeSource' : ''"
                @click="selectPic(item, index)">
                <img :src="item.resourceUrl" />
                <div><i class="iconfont">&#xe8d7;</i></div>
              </div>
              <div
                v-if="(!props.accept.includes((item.resourceAlias.split('.'))[item.resourceAlias.split('.').length - 1])) && props.accept[0] || (props.limitSize < item.resourceSize) && (props.accept.join())"
                class="masks">
              </div>
            </a-popover>
            <span>{{ item.resourceAlias }}</span>

          </div>
          <div v-else style="margin:auto;">
            <a-empty>
              <p style="color: #b6b6b6">暂无数据</p>
            </a-empty>
          </div>
        </div>
        <div class="pageNation" v-if="resourcesData.records.length">
          <a-pagination size="small" v-model:current="pageNumber" :total="resourcesData.total" show-size-changer
            show-quick-jumper @change="onChange" :pageSizeOptions="['5', '10', '20', '30']" v-model:pageSize="pageSize" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed, nextTick, onMounted, reactive } from "vue";
import type { TreeProps } from "ant-design-vue";
import { baseUploadProps } from "./uploadConfig/props";
import { dataSourceType } from "../../type";
import sourceTree from "./sourceLibary/sourceTree.vue"
import request from "@/api/index";
import { number } from "echarts";
//props
const props = defineProps(Object.assign({}, baseUploadProps, {
  maxCount: 0 as any,
  accept: [] as any,
  limitSize: 0 as any,
}),
);
//emit 
const emit = defineEmits(['emitSelectedKeys'])
//data

const activeKey = ref<number | string>("1");
const expandedKeys = ref<(string | number)[]>([]);
const searchValue = ref<string>("");
const autoExpandParent = ref<boolean>(true);
const dataList: TreeProps["treeData"] = [];
//资源库相关数据
let selectedChannelId = ref<string | number>('');
const resourcesData = reactive<dataSourceType>({
  records: [],
  total: 0,
  currentPage: 1,
})
const searchFileName = ref<any>(''); // 资源库搜索列表
const pageNumber = ref<number>(1);
const pageSize = ref<number>(10);
const selectFileList = ref<dataSourceType[]>([]);
const selectFileListIds = ref<any[]>([]);
//watch
watch(searchValue, (value) => {
  parentKey.value = [];
  if (value) {
    dataList.map((item: any) => {
      getParentKey(value, item);
    });
  }
  expandedKeys.value = parentKey.value;
  searchValue.value = value;
  autoExpandParent.value = true;
});
const parentKey = ref<(string | number)[]>([]);
// methods
const getParentKey = (value: string | number, node: any) => {
  if (node.channelName.indexOf(value) > -1) {
    // parentKey = node.id;
    parentKey.value.push(node.id);
    if (node.children) {
      node.children.map((item: any) => {
        getParentKey(value, item);
      });
    }
  } else {
    if (node.children) {
      node.children.map((item: any) => {
        getParentKey(value, item);
      });
    }
  }
};
// 切换tab
const changeTopTabs = () => {
  selectFileList.value = [];
  selectFileListIds.value = [];
  nextTick(() => {
    if (activeKey.value == 2) {
      getResourceSharePageList();
    } else {

      getResourcePageList();
    }
  })
}
// 根据分组获取资源库分页列表
const getResourcePageList = async () => {
  const params: dataSourceType = {
    pageNumber: pageNumber.value || 1,
    pageSize: pageSize.value || 10,
    resourceAlias: searchFileName.value,
    groupId: selectedChannelId.value || 0,
  }
  let data = await request.resourcePageList(params);
  resourcesData.records = [];
  data.records.forEach((item: dataSourceType) => {
    item.isShare = item.shared ? '已共享' : '未共享'
  })
  resourcesData.records = data.records;
  resourcesData.total = data.total;
}
// 根据分组获取资源库分页列表
const getResourceSharePageList = async () => {
  const params: dataSourceType = {
    pageNumber: pageNumber.value || 1,
    pageSize: pageSize.value || 10,
    resourceAlias: searchFileName.value,
  }
  let data = await request.resourceSharePageList(params);
  resourcesData.records = [];
  resourcesData.records = data.records || [];
  resourcesData.total = data.total;
}
// 选择资源
const selectPic = (item: dataSourceType, index: number) => {
  if (props.maxCount == 1) { // 意味着是单选
    if (selectFileListIds.value[0] == item.id) {
      selectFileList.value = [];
      selectFileListIds.value = [];
    } else {
      selectFileList.value[0] = item;
      selectFileListIds.value[0] = item.id;
    }
    emit('emitSelectedKeys', selectFileList.value)
  } else {
    if (!selectFileListIds.value.length) {
      selectFileList.value.push(item);
      selectFileListIds.value.push(item.id);
      return;
    }
    if (selectFileListIds.value.includes(item.id)) {
      for (let i = 0; i < selectFileListIds.value.length; i++) {
        if (selectFileListIds.value[i] == item.id) {
          selectFileListIds.value.splice(i, 1);
          selectFileList.value.splice(i, 1);
          continue;
        }
      }
    } else {
      if (selectFileListIds.value.length < props.maxCount || !props.maxCount) {
        selectFileListIds.value.push(item.id);
        selectFileList.value.push(item);
      }

    }
    emit('emitSelectedKeys', selectFileList.value)
  }


}
// 左侧tree传来选择值
const selectKeys = (val: any) => {
  selectedChannelId.value = val;
  getResourcePageList();
}
//分页器
const onChange = (val: any) => {
  getResourcePageList();
}
//onmounted
onMounted(() => {
  getResourcePageList();
})
</script>
<style lang="scss" scoped>
.resourceLibrary {
  margin-top: 24px;

  .icon-search {
    color: rgba(0, 0, 0, 0.45)
  }

  ::v-deep(.ant-tabs-tab) {
    border: none;
    margin-right: 2px;
    transition: none;
  }

  ::v-deep(.ant-tabs-tab-active) {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: none;
  }


  .content_1 {
    display: flex;
    height: 100%;
    margin-top: 24px;

    .content_left {
      width: 238px;
      border-right: 1px solid rgba(0, 0, 0, 0.06);
      margin-right: 24px;
    }

    .content_right {
      flex: 1;


      .searchHeader {
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        .caijian {
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.25);
          line-height: 22px;

          .iconfont {
            font-size: 16px;
          }

          span {
            margin-left: 8px;
          }
        }
      }

      .contentList {
        display: flex;
        flex-wrap: wrap;
        max-height: 300px;
        height: calc(100% - 100px);
        overflow: auto;

        .sourceImg {
          width: 104px;
          margin-right: 24px;
          position: relative;


          .container_img {
            width: 100%;
            box-sizing: border-box;
            padding: 8px;
            position: relative;
            margin-bottom: 8px;
            height: 104px;
            border-radius: 2px 2px 2px 2px;
            border: 1px solid rgba(0, 0, 0, 0.15);

            &:hover {
              border-color: var(--theme_button_active_bg_color, #1d39c4);
            }

            div {
              display: none;
            }

            img {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              margin: auto;
              max-width: calc(100% - 16px);
              max-height: calc(100% - 16px);
              z-index: 1;
            }
          }

          .activeSource {
            border-color: var(--theme_button_active_bg_color, #1d39c4);
            position: relative;

            div {
              position: absolute;
              width: 0;
              height: 0;
              border-top: 32px solid var(--theme_button_active_bg_color, #1d39c4);
              border-bottom: 32px solid transparent;
              border-left: 32px solid transparent;
              top: 0;
              right: 0;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;

              .iconfont {
                color: #fff;
                font-size: 18px;
                position: absolute;
                top: -38px;
                right: 0;
              }
            }
          }

          .masks {
            position: absolute;
            width: 104px;
            height: 104px;
            top: 0;
            left: 0;
            z-index: 3;
            background: #F0F0F0;
            opacity: 0.5;
          }

          span {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: rgba(0, 0, 0, 0.85);
            line-height: 22px;
          }
        }

        .sourceImg:nth-of-type(4n) {
          margin-right: 0px;
        }
      }

      .pageNation {
        margin-top: 24px;
        height: 24px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

}
</style>
<style lang="scss"></style>
